<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <div slot="header" class="clearfix">
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="20">
              <el-form
                :inline="true"
                :model="articleForm"
                class="demo-form-inline"
              >
                <el-form-item label="关键字">
                  <el-input
                    v-model="articleForm.keyword"
                    size="small"
                    placeholder="根据文章标题搜索"
                  />
                </el-form-item>
                <el-form-item label="状态">
                  <el-select
                    v-model="articleForm.state"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option label="启用" :value="1" />
                    <el-option label="禁用" :value="0" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button size="small" @click="clear">清除</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="serachBtn"
                  >搜索</el-button>
                </el-form-item>
              </el-form>
            </el-col>

            <el-col :span="2">
              <el-button
                type="success"
                size="small"
                icon="el-icon-edit"
                @click="addBtn"
              >新增技巧</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-alert type="info" show-icon :closable="false">
              <template #title> 数据一共{{ total }}条 </template>
            </el-alert>
          </el-row>
        </div>
        <!-- 内容表格 -->
        <div class="text item">
          <el-table :data="articleList" style="width:100%">>
            <el-table-column type="index" label="序号" />
            <el-table-column prop="title" label="文章标题" width="300">
              <template #default="{ row }">
                {{ row.title }}
                <i
                  :class="{ 'el-icon-film': row.videoURL ? true : false }"
                  @click="playVideo(row)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="visits" label="阅读数" />
            <el-table-column prop="username" label="录入人" />
            <el-table-column label="录入时间">
              <template #default="{ row }">
                {{ row.createTime | parseTimeByString }}
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template #default="{ row }">
                {{ row.state === 1 ? "已启用" : "已禁用" }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button
                  size="large"
                  type="text"
                  @click="previewBtn(row)"
                >
                  预览
                </el-button><el-button
                  size="large"
                  type="text"
                  @click="enablefn(row)"
                >
                  {{ row.state === 1 ? "禁用" : "启用" }}
                </el-button>

                <el-button
                  class="button"
                  size="large"
                  :class="{ current: row.state === 1 ? true : false }"
                  :disabled="row.state === 0"
                  type="text"
                  @click="editBtn(row)"
                >
                  修改
                </el-button>

                <el-button
                  class="button"
                  :class="{ current: row.state === 1 ? true : false }"
                  :disabled="row.state === 0"
                  size="large"
                  type="text"
                  @click="deleteBtn(row)"
                >
                  删除
                </el-button>

              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" :gutter="20">
            <el-pagination
              background
              :page-sizes="[5, 10, 20, 50]"
              layout="total,  prev, pager, next,sizes, jumper"
              :total="total"
              @current-change="handleCurrentChange"
              @size-change="temp"
            />
          </el-row>
        </div>
      </el-card>

      <!-- 预览的弹出层 -->
      <el-dialog
        title="预览文章"
        :visible.sync="previewDialog"
        width="60%"
        :before-close="handleClose"
      >
        <div>
          <h2>{{ articleDetails.title }}</h2>
          <span>{{ articleDetails.createTime | parseTimeByString }}</span>
          <span style="padding:10px">管理员</span>
          <i class="el-icon-view" />
          <span style="padding:10px">0</span>
        </div>
        <div v-html="articleDetails.articleBody" />
      </el-dialog>
      <!-- 添加编辑的弹层 -->
      <addEditVue
        ref="addEditVue"
        :row.sync="row"
        :add-edit-show.sync="addEditShow"
      />
      <!-- 播放视频 -->
      <el-dialog title="播放视频" :visible.sync="playVideoShow" width="60%" @close="closeVideo">
        <video
          ref="dialogVideo"
          width="100%"
          :src="video"
          controls
          autoplay
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 获取文章列表
import { list, remove, detail, changeState } from '../../api/hmmm/articles'
// 添加编辑的弹层
import addEditVue from './companys/add-edit.vue'
export default {
  components: {
    addEditVue
  },
  data() {
    return {
      // 表单
      articleForm: {
        keyword: null,
        state: null
      },
      // 表格
      articleList: [
        {
          title: '2016-05-03',
          creator: '王小虎',
          enteredBy: '上海市普陀区金沙江路 1516 弄',
          entryTime: '',
          state: '',
          operation: ''
        }
      ],
      total: null,
      // 请求参数
      list: {
        page: 1,
        pagesize: 10
      },
      // 要修改的id
      row: null,
      // 预览的弹层
      previewDialog: false,
      // 预览文章
      articleDetails: {},
      addEditShow: false,
      // 播放视频
      playVideoShow: false,
      video: ''
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    // 获取文章方法
    async getArticleList() {
      const { data } = await list(this.list)
      // console.log(data)
      this.total = data.counts
      this.articleList = data.items
      // console.log(this.articleList)
    },
    handleCurrentChange(val) {
      // 将最新页码值赋值给page当前页码值
      this.list.page = val
      this.getArticleList()
    },
    // 删除文章
    deleteBtn(row) {
      // console.log(row.id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await remove(row)

          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          const totalPage = Math.ceil((this.total - 1) / this.list.pagesize) // 总页数
          const currentPage = this.list.page > totalPage ? totalPage : this.list.page
          this.list.page = currentPage < 1 ? 1 : currentPage
          this.serachBtn()
        })
        .catch((err) => {
          list
          console.log(err)
        })
    },
    // 预览文章
    async previewBtn(row) {
      this.previewDialog = true
      const { data } = await detail(row)
      // console.log(data)
      this.articleDetails = data
    },
    // 预览文章的关闭按钮
    handleClose() {
      this.previewDialog = false
    },
    // 添加按钮
    addBtn() {
      this.addEditShow = true
    },
    // 修改按钮
    editBtn(row) {
      this.row = row
      setTimeout(() => {
        this.$refs.addEditVue.detailfn()
      }, 0)
      this.addEditShow = true
    },
    // 播放视频
    playVideo(row) {
      this.playVideoShow = true
      this.video = row.videoURL
      this.$refs.dialogVideo.play()
    },
    // 暂停视频播放
    closeVideo() {
      this.$refs.dialogVideo.pause()
    },
    // 启用禁用
    async enablefn(row) {
      // console.log(row)
      if (row.state === 1) {
        row.state = 0
        await changeState(row)
      } else {
        row.state = 1
        await changeState(row)
      }
      this.$message.success('操作成功')
      this.serachBtn()
    },
    // 搜索按钮事件
    async serachBtn() {
      if (this.articleForm.keyword || this.articleForm.state) {
        // console.log(this.articleForm)
        this.list.page = 1
        const { data } = await list({ ...this.list, ...this.articleForm })
        this.total = data.counts
        this.articleList = data.items
      } else {
        this.getArticleList()
      }
    },
    clear() {
      this.articleForm = {
        title: null,
        state: null
      }
      this.getArticleList()
    },
    temp(pagesize) {
      this.list.page = 1
      this.list.pagesize = pagesize
      this.getArticleList()
    }
  }
}
</script>

<style scoped>
.grid-content {
  cursor: pointer !important;
  text-align: center;
}
.el-icon-film {
  margin-left: 5px;
  font-size: 18px;
  color: blue;
}
.current {
  color: #409eff;
}

</style>
